<template>
	<view class="container  font-10px" v-if="mainflag">
		<view class=" top d-flex flex-row">
			<view class="box-shadow top-left ">
				<view class="item d-flex">
					<text class="title dep">客户公司：</text>
					<text class="content lin-hid">{{info.user_dep}}</text>
				</view>
				<view class="item">
					<text class="title">设备型号：</text>
					<text class="content">{{info.eqtype}}</text>
				</view> 
				<view class="item  d-flex">
					<view class="title" style="text-indent: 20rpx;">机身号：</view>
					<text class="content">{{info.number}}</text>
				</view>
				<view class="item">
					<text class="title">设备配置：</text>
					<text class="content">{{info.configure}}</text>
				</view>
				<view class="item">
					<text class="title">墨水型号：</text>
					<text class="content">{{info.solvent_type}}</text>
				</view>
				<view class="item">
					<text class="title">溶剂型号：</text>
					<text class="content">{{info.ink_type}}</text>
				</view>
				<view class="item">
					<text class="title">联系人：</text>
					<text class="content">{{info.user}}</text>
				</view>
				<view class="item" @tap="contact(info.user_phone)">
					<text class="title">电话号码：</text>
					<text class="content">{{info.user_phone.replace(info.user_phone.slice(3,8),'*****').trim()}}</text>
					<text class="cuIcon-phone font-12px margin-left"></text>
				</view>
			</view>
			<view class="box-shadow flex-column justify-center top-right">
				<view class="item d-flex">
					<text class="title">工单类型：</text>
					<text class="content">{{reportType[info.type].type}}</text>
				</view>
				<view class="item">
					<text class="title">设备维护专员：</text>
					<text class="content">{{EqEngineerInfo.name}}</text>
				</view>
				<view class="item flex-column">
					<text class="title">实际处理工程师：</text>
					<text class="content text-bold text-xxl ">{{practiceEngineerInfo.name}}</text>
				</view>
			</view>
		</view>
		<view class="box-shadow middle">
			<view class="item flex-column">
				<text class="title">故障现象：</text>
				<text class="content">{{info.reason?info.reason:'无'}}</text>
			</view>
		</view>
		<view class="box-shadow bottom">
			<view class="text-center font-12px text-bold margin-sm">处理结果</view>
			<view class="item">
				<text class="title">提交时间：</text>
				<text class="content">{{info.createTime}}</text>
			</view>
			<view class="item">
				<text class="title">是否解决：</text>
				<text class="content" :class="info.result == 1?'text-green':'text-red'">{{info.result == 1?"已解决":"未解决"}}</text>
			</view>
			<view class="item flex-row">
				<text class="title">解决方案：</text>
				<view class="content" style="flex-basis: 84%;">{{info.solution?info.solution:'无'}}</view>
			</view>
			<view class="item">
				<text class="title">是否更换配件：</text>
				<text class="content" :class="info.fitting == 1?'text-green':'text-red'">{{info.fitting == 1?"是":"否"}}</text>
			</view>
			<view class="item" v-show="info.fitting == 1?true:false">
				<text class="title">配件类型：</text>
				<text class="content">{{info.fitting_addtion}}</text>
			</view>
		</view>
		<view class="box-shadow flex-column img-car">
			<text class="text">故障图片：</text>
			<view class="flex-row img-box" v-if="info.file.length>0">
				<view v-for="(item,key) in info.file" :key="key" class="img-container">
					<image :src="item.file" class="my-img" @tap="preview(item.file)"></image>
				</view>
			</view>
			<view v-else class="text-gray text-center">
				暂无图片....
			</view>
		</view>
		<view class="font-color-888 text-center footer font-12px">百来码“了然”售后服务系统</view>
	</view>
</template>

<script>
	import {
		getReportDetailsByEquipmentId,
		getEquipmentById,
		getInfo
	} from '@/api/user/index.js'
	export default {
		data() {
			return {
				mainflag: false,
				//查询失败，没有数据
				showflag: false,
				reportType: [{
					id: 0,
					type: '巡检'
				}, {
					id: 1,
					type: '调试'
				}, {
					id: 2,
					type: '保养'
				}, {
					id: 3,
					type: '维修'
				}, {
					id: 4,
					type: '培训'
				}, {
					id: 5,
					type: '安装'
				}, ],
				info: {
					id: '',
					type: 1,
					reason: " ",
					result: '',
					solution: "",
					fitting: '',
					fitting_addtion: "",
					file: [{
						id: '',
						report_id: '',
						file: " "
					}]

				},
				equipmentInfo: {},
				// 实际工程师
				practiceEngineerInfo: {
					name: '',
					number: '',
					job: ''
				},
				// 设备所属工程师
				EqEngineerInfo: {
					name: '',
					number: '',
					job: ''
				}
			}
		},
		methods: {
			/**
			 * 联系客户
			 */
			contact(phone) {
				let _this = this
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			
			submit(){
				console.log(this.submitInfo)
			},
			// ############################图片预览#############################
			preview(imageUrl){
				var imgArr = [];
				imgArr.push(imageUrl);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			// 获取设备信息
			getEquipmentInfo(id){
				getEquipmentById(id).then(res =>{
					this.equipmentInfo = res.result[0]
					// 获取设备所属工程师信息
					getInfo(this.equipmentInfo.engineer_id).then(res =>{
						this.EqEngineerInfo = res.result
						console.log(res)
					})
					uni.hideLoading()
				})
			}

		},
		onShow() {
			/**
			 * 检验当前是否已经登录
			 */
			let curRoute  = this.$mp.page.route;
			this.$intercept.permission(curRoute)
		},
		onLoad(option) {
			console.log(option.id)
			// let id = option.id
			let id = option.id
			getReportDetailsByEquipmentId(id).then((res)=>{
				if(res.result){
					this.info = res.result
					console.log(res)
					// 获取实际处理工程师信息
					getInfo(this.info.engineer_id).then(res =>{
						this.practiceEngineerInfo = res.result
						console.log(res)
					})
					this.getEquipmentInfo(res.result.equipment_id)
						
					
				}else{
					uni.hideLoading()
					this.mainflag = true
					this.showflag = false
				}
				setTimeout(()=>{
					uni.hideLoading()
					this.mainflag = true
					this.showflag = true
				},2000)
			})
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		position: relative;
		width: 100%;
		background-color: #EFEFF4 ;
		height: 100%;
	}
	.container {
		letter-spacing: 1rpx;
		line-height: 40rpx;
		padding: 10rpx;
		width: 100%;
		margin: 0 auto;
		.top{
			justify-content: space-between;
			.top-left{
				background-color: #FFFFFF ;
				padding: 6rpx;
				width: 62%;
				.dep{
					min-width: 107rpx;
				}
			}
			.top-right{
				background-color: #FFFFFF ;
				padding: 10rpx;
				width: 36%;
				line-height: 60rpx;
				.item{
					&:last-child{
						
					}
				}
				
			}
		}
		
		.middle{
			background-color: #FFFFFF ;
			padding: 10rpx;
			margin: 20rpx 0;
			min-height: 200rpx;
			.item{
				.content{
					text-indent: 40rpx;
				}
			}
		}
		.bottom{
			background-color: #FFFFFF ;
			padding: 10rpx;
			
		}
		.img-car {
			background-color: #ffffff ;
			margin-top: 10rpx;
			padding: 10rpx;
			min-height: 200rpx;
			
			.img-box{
				align-self: flex-start;
				flex-wrap: wrap;
				width: 95%;
				margin: 0 auto;
				.img-container{
					margin: 10rpx;
					width: 158rpx;
					height: 158rpx;
				}
			}
			
		}
		.footer{
			width: 100%;
			position: absolute; 
			bottom: 20rpx;
			
		}
		
	}
	.box-shadow{
		box-shadow: 0 2px 4px 0 rgba(22,22,22,.2), 0 3px 10px 0 rgba(25,25,25,.1);
		border-radius: 10rpx;
	}
</style>
